<template>
  <div>
    <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" title="课件管理" width="50%" append-to-body>
      <el-tabs v-model="activeName" type="card">
        <!-- <el-tab-pane
          label="生成数字人视频课件"
          name="first">
          <DigitalHumanGennerate
            :show-digital-human="showDigitalHuman"
            @closeDialog="(e) => (showDigitalHuman = e)"
            @complete="completeGen" />
        </el-tab-pane> -->
        <el-tab-pane label="上传课件" name="second">
          <div>
            <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="120px">
              <el-row style="margin-top: 15px">
                <el-col :span="12">
                  <el-form-item label="课件类型" prop="fileType">
                    <dic-list-select v-model="postForm.fileType" :disabled="isEdit" dic-code="course_file_type" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <!--                  <el-button type="success" size="small" @click="showDHDialog">生成数字人视频</el-button>-->
                </el-col>
              </el-row>

              <el-form-item label="课件名称" prop="title">
                <el-input v-model="postForm.title" />
              </el-form-item>

              <el-form-item label="课件分类">
                <dic-catalog-tree v-model="postForm.catId" dic-code="course_file_catalog" />
              </el-form-item>

              <el-form-item v-if="postForm.fileType" label="上传文件" prop="fileUrl">
                <file-upload v-model="postForm.fileUrl" :limit="1" :tips="tips" :accept="accept" list-type="file" />
              </el-form-item>

              <el-form-item v-if="postForm.fileType === '33'" label="要求时长">
                <second-set v-model="postForm.duration" />
                <div style="color: #ff4949">
                  <small>1、可自动获取视频时长，如未获取，请稍后在列表查看；2、也可手动填写要求时长</small>
                </div>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-alert v-if="!showDPTip" type="success" style="margin-bottom: 20px">
                课件保存后，您可以从列表来预览它！
              </el-alert>
              <el-alert v-else type="warning" style="margin-bottom: 20px" center>
                数字人授课视频正在生成中，课件保存后，生成结束可在课件管理中查看！
              </el-alert>
              <el-button :loading="loading" type="primary" @click="handleSave">确 定</el-button>
              <el-button @click="dialogVisible = false">取 消</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <div v-if="
      postForm.fileType === '33' &&
      postForm.fileUrl &&
      (postForm.duration === 0 || postForm.duration === undefined) &&
      postForm.fileStatus != 'processing'
    " style="display: none">
      <video-player v-model="postForm.fileUrl" @loaded="videoLoaded" />
    </div>
  </div>
</template>
<script>
import DigitalHumanGennerate from "@/components/DigitalHumanGenerate";
import DicListSelect from "@/components/DicListSelect";
import FileUpload from "@/components/FileUpload";
import SecondSet from "@/components/SecondSet";
import DicCatalogTree from "@/components/DicTreeSelect";
import VideoPlayer from "@/components/VideoPlayer";
import { saveData, fetchDetail } from "@/api/course/file";
export default {
  components: {
    DigitalHumanGennerate,
    DicListSelect,
    FileUpload,
    SecondSet,
    DicCatalogTree,
    VideoPlayer,
  },
  data() {
    return {
      dialogVisible: false,
      postForm: {
        fileType: "",
        fileUrl: "",
        needLearn: 0,
        fileStatus: "",
      },
      activeName: "first",
      isEdit: false,
      showDigitalHuman: false,
      loading: false,
      rules: {
        title: [{ required: true, message: "课件名称不能为空！" }],

        fileType: [{ required: true, message: "课件类型不能为空！" }],

        fileUrl: [{ required: true, message: "课件文件必须上传！" }],
      },
      showDPTip: false,
    };
  },
  watch: {
    "postForm.fileType": {
      handler(val) {
        if (val === "11") {
          this.tips = "包含doc,docx,xls,xlsx,等Office类型文件";
          this.accept = ".doc, .docx, .xls, .xlsx";
          this.data = {};
          // this.previewData.fileType = '11'
        }
        if (val === "22") {
          this.tips = "PDF文件可以直接在线预览";
          this.accept = ".pdf";
          this.data = {};
          // this.previewData.fileType = '22'
        }
        if (val === "33") {
          this.tips = "视频文件,尽可能使用mp4格式兼容性较好，也支持flv,mkv,rm,rmvb等格式";
          this.accept = ".mp4, .mov, .flv, .mkv, .rm, .rmvb, .webm, .ogv, .avi";
          this.data = {};
          // this.previewData.fileType = '33'
        } else if (this.showDPTip) {
          this.showDPTip = false;
        }
      },
    },
  },
  methods: {
    handleAdd(type) {
      this.activeName = type;
      this.dialogVisible = true;
      this.isEdit = false;
      for (const key in this.postForm) {
        if (key != "needLearn" && key != "duration") {
          this.postForm[key] = "";
        } else {
          this.postForm[key] = 0;
        }
      }
      //this.showDigitalHuman=true
    },

    handleEdit(id) {
      // 先清理表单
      this.postForm = {};
      this.isEdit = true;
      this.dialogVisible = true;
      fetchDetail(id).then((res) => {
        this.postForm = res.data;
      });
    },

    handleSave() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return;
        }

        this.loading = true;

        saveData(this.postForm)
          .then(() => {
            this.$message({
              type: "success",
              message: "课件保存成功!",
            });
            this.dialogVisible = false;
            this.$emit("getList", true);
            this.loading = false;
          })
          .catch((err) => {
            console.log(err);
            this.loading = false;
          });
      });
    },
    showDHDialog() {
      // this.$message.error('如需使用此功能，请与运营商联系！')
      // return
      this.showDigitalHuman = true;
    },
    completeGen(url) {
      if (url) {
        this.$emit("DHCompleteGen", url);
        this.postForm.fileUrl = url;
        this.postForm.fileType = "33";
        this.postForm.fileStatus = "processing";
        this.$set(this.postForm, "title", "数字人授课视频-" + parseInt(Math.random() * 1000));
        this.showDigitalHuman = false;
        this.showDPTip = true;
      }
    },
    // 读取视频长度
    videoLoaded(d) {
      console.log("++++++视频长度" + d);
      this.postForm["duration"] = parseInt(d);
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  /deep/ .el-alert--warning.is-light .el-alert__description {
    font-size: 14px;
  }
}
</style>
